<template>
	<view class="main">
		<view class="tn-flex tn-flex-wrap tn-flex-row-between tn-padding-lg">
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('juanzong')">
				<view class=" icon">
					<image style="width: 60rpx; height: 60rpx" src="/static/icon/卷宗列表.svg" mode=""></image>
				</view>
				<view class="tn-text-lg">卷宗卷皮</view>
			</view>
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('fapiao')">
				<view class="icon">
					<image style="width: 60rpx; height: 60rpx" src="/static/icon/fapiao_2.svg" mode=""></image>
				</view>
				<view class="tn-text-lg">发票照片</view>
			</view>
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('fuwu')">
				<view class="icon">
					<image style="width: 60rpx; height: 60rpx" src="/static/icon/qingdanbeifen.svg" mode=""></image>
				</view>
				<view class="tn-text-lg">服务协议</view>
			</view>
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('zuoye')">
				<view class="icon">
					<image style="width: 60rpx; height: 60rpx" src="/static/icon/清单.svg" mode=""></image>
				</view>
				<view class="tn-text-lg">作业清单</view>
			</view>

			<view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('fanghu')">
				<view class="icon">
					<image style="width: 60rpx; height: 60rpx" src="/static/icon/xianchangzhaopian_2.svg" mode=""></image>
				</view>
				<view class="tn-text-lg">现场照片</view>
			</view>
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('jiacha')">
				<view class="icon">
					<image style="width: 60rpx; height: 60rpx" src="/static/icon/fenleizhijian.svg" mode=""></image>
				</view>
				<view class="tn-text-lg">安管记录</view>
			</view>
			<view class="nav_bg nav_item tn-shadow-warp tn-bg-white" @click="toPage('jianguan')">
				<view class="icon">
					<image style="width: 60rpx; height: 60rpx" src="/static/icon/fuwujianguan_2.svg" mode=""></image>
				</view>
				<view class="tn-text-lg">服务监管</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		toPage(url) {
      if(url === 'zuoye'){
        url = 'zuoyemixin/zuoyeList?jyBaseId=' + this.$route.query.jyBaseId
      }
			uni.navigateTo({
				url: '/pages/rescue/add/' + url
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	background-color: #f7f8fd;
	min-height: calc(100vh - 44px);
}
.nav_item {
	width: calc(50% - 20rpx);
	margin-bottom: 40rpx;
	border-radius: 6px;
	padding: 16px 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150rpx;
	// color: #000;
}

.icon {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: 28rpx;
	// background-color: darkblue;
	// color: white;
	margin-right: 10rpx;
}

.nav_bg {
	background-image: url('/static/index/item-bg.png');
	background-size: 100% 100%;
}
</style>
